<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_ES8-字符串的填充方法</title>
  <!-- 
  在 JavaScript 的 ES8（ECMAScript 2017）中，新增了两个字符串填充方法： `String.prototype.padStart()`  和  `String.prototype.padEnd()` 。这两个方法用于在字符串的开头或结尾填充指定字符，以达到一定的长度。
  一、String.prototype.padStart()
   1. 定义
  `padStart()`  方法用于在当前字符串的开头填充指定的字符，以达到给定的长度。

   2. 语法
  str.padStart(targetLength, padString);
  - targetLength：目标字符串长度。如果当前字符串长度大于或等于这个值，则返回当前字符串。
  - padString：用于填充的字符串。如果填充字符串的长度大于目标长度，则会截断。

   3. 示例
  const str = '5';
  console.log(str.padStart(2, '0')); // 输出: '05'
  console.log(str.padStart(5, '0')); // 输出: '00005'
  console.log(str.padStart(5, '*')); // 输出: '5'
  console.log(str.padStart(2, '123')); // 输出: '1'（因为只取了 '1'）
  二、String.prototype.padEnd()

   1. 定义
  `padEnd()`  方法用于在当前字符串的结尾填充指定的字符，以达到给定的长度。

   2. 语法
  str.padEnd(targetLength, padString);
  - targetLength：目标字符串长度。如果当前字符串长度大于或等于这个值，则返回当前字符串。
  - padString：用于填充的字符串。如果填充字符串的长度大于目标长度，则会截断。

   3. 示例
  const str = '5';
  console.log(str.padEnd(2, '0')); // 输出: '50'
  console.log(str.padEnd(5, '0')); // 输出: '50000'
  console.log(str.padEnd(5, '*')); // 输出: '5'
  console.log(str.padEnd(2, '123')); // 输出: '5'（因为只取了 '5'）
  
  三、总结
  - padStart()：在字符串开头填充指定字符，达到目标长度。常用于格式化数字和字符串，使其在输出时长度一致。
  - padEnd()：在字符串结尾填充指定字符，达到目标长度。也常用于格式化输出。
  -->
</head>
<body>

  <h1 class="title"></h1>

  <script>
    // 1. padStart() 方法在字符串的开始位置填充指定的字符串，直到达到指定的长度
    const str = 'hello';
    const newStr = str.padStart(10, '*');
    console.log(newStr); // *hello

    // 2. padEnd() 方法在字符串的结束位置填充指定的字符串，直到达到指定的长度
    const newStr2 = str.padEnd(10, '*');
    console.log(newStr2); // hello*

    // 3. 应用场景
    // 3.1 日期格式化
    const date = '2022-01-01';
    const newDate = date.padStart(14, '0');
    console.log(newDate); // 2022-01-01

    // 3.2 提示信息
    const title = '标题';
    const newTitle = title.padStart(10, '*').padEnd(15, '*');
    console.log(newTitle); // *标题*

  </script>
  
</body>
</html>